<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
    <title>checkbox style</title>
    <!-- Bootstrap -->

    <style>
        .c-checkbox,
        .c-radio {
            margin-right: 4px;
        }
        
        .c-checkbox *,
        .c-radio * {
            cursor: pointer;
        }
        
        .c-checkbox input,
        .c-radio input {
            opacity: 0;
            position: absolute;
            margin-left: 6px;
            margin-top: 6px;
            z-index: 8;
        }
        
        .c-checkbox span,
        .c-radio span {
            position: relative;
            display: inline-block;
            vertical-align: top;
 
            width: 14px;
            height: 14px;
            border-radius: 1px;
            border: 1px solid #ccc;
            margin-right: 5px;
            text-align: center;
            z-index: 0;
        }
        
        .c-checkbox span:before,
        .c-radio span:before {
            margin-left: 0;
        }
        
        .c-checkbox:hover span,
        .c-radio:hover span {
            border-color: #0079dd;
        }
        
        .form-inline .c-checkbox span,
        .form-inline .c-radio span {
            margin-left: 0;
        }
        
        .c-checkbox.c-checkbox-rounded span,
        .c-radio.c-checkbox-rounded span,
        .c-checkbox.c-radio-rounded span,
        .c-radio.c-radio-rounded span {
            border-radius: 500px;
        }
        /* override for radio */
        
        .c-radio span {
            border-radius: 500px;
        }
        /* the icon */
        
        .c-checkbox span:before,
        .c-radio span:before {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            text-align: center !important;
            font-size: 10px;
            -webkit-font-size: 12px;
            -webkit-transform: scale(0.7);
            line-height: 12px;
            vertical-align: middle;
        }
        /* Checked state */
        /* override for radio */
        /* Disable state */
        /* override for radio */
        
        .c-checkbox input[type=checkbox]:checked+span:before,
        .c-radio input[type=checkbox]:checked+span:before,
        .c-checkbox input[type=radio]:checked+span:before,
        .c-radio input[type=radio]:checked+span:before {
            color: #fff;
            opacity: 1;
            transition: color 0.3s ease-out;
        }
        
        .c-checkbox input[type=checkbox]:checked+span,
        .c-radio input[type=checkbox]:checked+span,
        .c-checkbox input[type=radio]:checked+span,
        .c-radio input[type=radio]:checked+span {
            border-color: #0079dd;
            background-color: #0079dd;
        }
        
        .c-checkbox input[type=radio]:checked+span,
        .c-radio input[type=radio]:checked+span {
            background-color: #fff;
        }
        
     
        
        .c-checkbox input[type=checkbox]:disabled+span,
        .c-radio input[type=checkbox]:disabled+span,
        .c-checkbox input[type=radio]:disabled+span,
        .c-radio input[type=radio]:disabled+span {
            border-color: #dddddd !important;
            background-color: #dddddd !important;
        }
        
        .c-checkbox input[type=radio]:disabled+span,
        .c-radio input[type=radio]:disabled+span {
            background-color: #fff !important;
        }
        
        .c-checkbox input[type=radio]:disabled+span:before,
        .c-radio input[type=radio]:disabled+span:before {
            color: #dddddd;
        }
    </style>
</head>

<body>
    <div style="border:1px solid red">
    <div class="checkbox c-checkbox">
        <label>
                           <input id="printer"  type="checkbox"   />
                          <span class="fa fa-check"></span>打单员</label>
    </div>
    </div>
</body>
</html>